<template>
    <div class="shoe-store">
      <!-- 导航栏：复用主页面样式，默认激活“购物车” -->
      <el-menu
        default-active="3"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#1a1a1a"
        text-color="#fff"
        active-text-color="#ff4d4f"
        @select="handleSelect"
        border-bottom="false"
      >
        <div class="logo">
          <span class="brand">鞋城履行</span>
        </div>
        <el-menu-item index="1" @click="$router.push('/main')">首页</el-menu-item>
        <el-menu-item index="2" @click="$router.push('/page/shoe')">鞋类大全</el-menu-item>
        <el-menu-item index="3" @click="$router.push('/page/shoppingcart')">购物车</el-menu-item>
        <el-menu-item index="4" @click="$router.push('/page/orders')">订单</el-menu-item>
        <div class="user-actions">
          <el-icon class="icon" @click="showSearch = !showSearch"><Search /></el-icon>
          <el-icon class="icon"><User/></el-icon>
          <el-icon class="icon"><ShoppingCart /></el-icon>
        </div>
      </el-menu>
  
      <!-- 搜索框：与主页面逻辑一致 -->
      <div v-if="showSearch" class="search-container">
        <el-input 
          placeholder="搜索鞋款、品牌或系列..." 
          v-model="searchQuery"
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button icon="Search" @click="handleSearch"></el-button>
          </template>
        </el-input>
      </div>
  
      <!-- 页面标题区 -->
      <div class="cart-header">
        <div class="container">
          <h1 class="page-title">我的购物车</h1>
          <p class="page-desc">查看已添加的商品，调整数量或直接结算</p>
        </div>
      </div>
  
      <!-- 购物车主体内容 -->
      <section class="cart-section">
        <div class="container">
          <!-- 购物车为空状态 -->
          <div v-if="cartItems.length === 0" class="empty-cart">
            <el-empty 
              image="https://cube.elemecdn.com/6/94/4d3ea53c0c9f309442b5ea96589jpeg.jpeg"
              description="您的购物车还是空的"
            >
              <el-button type="primary" @click="$router.push('/page/shoe')">去添加商品</el-button>
            </el-empty>
          </div>
  
          <!-- 购物车有商品状态 -->
          <div v-else class="cart-content">
            <!-- 购物车列表 -->
            <div class="cart-list">
              <!-- 列表标题 -->
              <div class="cart-list-header">
                <div class="cart-col select-col">
                  <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
                </div>
                <div class="cart-col product-col">商品信息</div>
                <div class="cart-col price-col">单价</div>
                <div class="cart-col quantity-col">数量</div>
                <div class="cart-col subtotal-col">小计</div>
                <div class="cart-col action-col">操作</div>
              </div>
  
              <!-- 商品列表 -->
              <div class="cart-items">
                <div v-for="item in cartItems" :key="item.id" class="cart-item">
                  <div class="cart-col select-col">
                    <el-checkbox v-model="item.selected" @change="handleItemSelect"></el-checkbox>
                  </div>
                  <div class="cart-col product-col">
                    <div class="product-info">
                      <img :src="item.imgUrl" alt="商品图片" class="product-img">
                      <div class="product-details">
                        <h3 class="product-name">{{ item.name }}</h3>
                        <p class="product-spec">品牌：{{ getBrandName(item.brandId) }}</p>
                        <p class="product-spec">分类：{{ getCategoryName(item.categoryId) }}</p>
                        <p class="product-spec">尺码：{{ item.size }}</p>
                      </div>
                    </div>
                  </div>
                  <div class="cart-col price-col">
                    <span class="price">¥{{ item.price }}</span>
                    <span v-if="item.originalPrice" class="original-price">¥{{ item.originalPrice }}</span>
                  </div>
                  <div class="cart-col quantity-col">
                    <el-input-number
                      v-model="item.quantity"
                      :min="1"
                      :max="item.stock"
                      @change="handleQuantityChange(item)"
                      size="small"
                    ></el-input-number>
                    <span class="stock-status" v-if="item.quantity >= item.stock">
                      库存仅剩{{ item.stock }}件
                    </span>
                  </div>
                  <div class="cart-col subtotal-col">
                    <span class="subtotal" :class="{ 'discounted': item.originalPrice }">
                      ¥{{ (item.price * item.quantity).toFixed(2) }}
                    </span>
                    <span v-if="item.originalPrice" class="save-amount">
                      省¥{{ ((item.originalPrice - item.price) * item.quantity).toFixed(2) }}
                    </span>
                  </div>
                  <div class="cart-col action-col">
                    <el-button 
                      type="text" 
                      class="delete-btn" 
                      @click="handleDeleteItem(item.id)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
  
              <!-- 操作按钮 -->
              <div class="cart-operations">
                <el-button 
                  type="text" 
                  class="batch-delete-btn" 
                  @click="handleBatchDelete"
                  :disabled="!hasSelectedItems"
                >
                  <el-icon><Delete /></el-icon> 删除选中商品
                </el-button>
                <el-button 
                  type="text" 
                  class="continue-shopping-btn"
                  @click="$router.push('/page/shoe')"
                >
                  继续购物
                </el-button>
              </div>
            </div>
  
            <!-- 结算区域 -->
            <div class="cart-summary">
              <div class="summary-box">
                <div class="summary-item">
                  <span class="label">已选商品：</span>
                  <span class="value">{{ selectedQuantity }} 件</span>
                </div>
                <div class="summary-item">
                  <span class="label">合计：</span>
                  <span class="value total-price">¥{{ totalPrice.toFixed(2) }}</span>
                </div>
                <div class="summary-item">
                  <span class="label">优惠：</span>
                  <span class="value discount">¥{{ totalDiscount.toFixed(2) }}</span>
                </div>
                <div class="summary-item final">
                  <span class="label">应付金额：</span>
                  <span class="value payable">¥{{ payableAmount.toFixed(2) }}</span>
                </div>
                <el-button 
                  class="checkout-btn" 
                  type="primary"
                  @click="handleCheckout"
                  :disabled="!hasSelectedItems"
                >
                  结算
                </el-button>
                <p class="tax-info">税费已包含在价格中</p>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 推荐商品区 -->
      <section v-if="cartItems.length > 0" class="recommendation-section">
        <div class="container">
          <h2 class="section-title">为您推荐</h2>
          <div class="recommendation-grid">
            <div v-for="product in recommendedProducts" :key="product.id" class="recommendation-card">
              <img :src="product.imgUrl" alt="推荐商品" class="recommendation-img">
              <h3 class="recommendation-name">{{ product.name }}</h3>
              <p class="recommendation-price">¥{{ product.price }}</p>
              <el-button 
                class="add-to-cart-btn" 
                size="small"
                @click="addRecommendedToCart(product)"
              >
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 页脚：复用主页面样式 -->
      <footer class="footer">
        <div class="footer-content">
          <div class="footer-column">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">品牌故事</a></li>
              <li><a href="#">招贤纳士</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>客户服务</h3>
            <ul>
              <li><a href="#">帮助中心</a></li>
              <li><a href="#">售后服务</a></li>
              <li><a href="#">配送信息</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>支付方式</h3>
            <ul>
              <li><a href="#">在线支付</a></li>
              <li><a href="#">货到付款</a></li>
              <li><a href="#">优惠券使用</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>关注我们</h3>
            <div class="social-icons">
              <el-icon class="social-icon"><Weibo /></el-icon>
              <el-icon class="social-icon"><Wechat /></el-icon>
              <el-icon class="social-icon"><Instagram /></el-icon>
            </div>
            <p class="app-download">下载我们的APP</p>
          </div>
        </div>
        <div class="copyright">
          <p>© 2023 KickShop. 保留所有权利</p>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue';
  import { Search, User, ShoppingCart, Delete,  } from '@element-plus/icons-vue';
  // 导入图片资源
  import basketball from '../../photos/篮球鞋.jpg'
  import running from '../../photos/跑步鞋.jpg'
  import flatshoes from '../../photos/板鞋.jpg'
  import footballshoes from '../../photos/足球鞋.jpg'
  import xlshoes from '../../photos/训练鞋.jpg'
  import xxshoes from '../../photos/休闲鞋.jpg'
  import nike from '../../photos/耐克.jpg'
  import kw from '../../photos/匡威.jpg'
  import ad from '../../photos/阿迪达斯.jpg'
  import ln from '../../photos/李宁.jpg'
  import hx from '../../photos/鸿星尔克.jpg'
  
  // 状态管理
  const showSearch = ref(false);
  const searchQuery = ref('');
  const selectAll = ref(false);
  
  // 分类数据（与主页面一致）
  const categories = ref([
    { id: 1, name: '篮球鞋', imgUrl: basketball },
    { id: 2, name: '跑步鞋', imgUrl: running },
    { id: 3, name: '板鞋', imgUrl: flatshoes },
    { id: 4, name: '足球鞋', imgUrl: footballshoes },
    { id: 5, name: '训练鞋', imgUrl: xlshoes },
    { id: 6, name: '休闲鞋', imgUrl: xxshoes }
  ]);
  
  // 品牌数据（与主页面一致）
  const brands = ref([
    { id: 1, name: '耐克', imgUrl: nike },
    { id: 2, name: '匡威', imgUrl: kw },
    { id: 3, name: '李宁', imgUrl: ln },
    { id: 4, name: '鸿星尔克', imgUrl: hx },
    { id: 5, name: '阿迪达斯', imgUrl: ad }
  ]);
  
  // 购物车商品数据
  const cartItems = ref([
    {
      id: 1,
      name: 'LeBron 19 篮球鞋',
      brandId: 1,
      categoryId: 1,
      price: 1599,
      originalPrice: 1799,
      imgUrl: 'https://picsum.photos/id/1002/400/400',
      quantity: 1,
      size: '42',
      stock: 28,
      selected: true
    },
    {
      id: 7,
      name: 'Dunk Low 板鞋',
      brandId: 1,
      categoryId: 3,
      price: 799,
      originalPrice: 799,
      imgUrl: 'https://picsum.photos/id/1001/400/400',
      quantity: 2,
      size: '41',
      stock: 76,
      selected: true
    },
    {
      id: 12,
      name: 'NMD_R1 休闲鞋',
      brandId: 5,
      categoryId: 6,
      price: 999,
      originalPrice: 1199,
      imgUrl: 'https://picsum.photos/id/1070/400/400',
      quantity: 1,
      size: '43',
      stock: 37,
      selected: false
    }
  ]);
  
  // 推荐商品数据
  const recommendedProducts = ref([
    {
      id: 4,
      name: 'Air Zoom 跑步鞋',
      price: 899,
      imgUrl: 'https://picsum.photos/id/1000/400/400'
    },
    {
      id: 8,
      name: 'Chuck 70 经典板鞋',
      price: 599,
      imgUrl: 'https://picsum.photos/id/1040/400/400'
    },
    {
      id: 11,
      name: 'Blazer 休闲鞋',
      price: 699,
      imgUrl: 'https://picsum.photos/id/1006/400/400'
    },
    {
      id: 3,
      name: '韦德之道 10 篮球鞋',
      price: 1099,
      imgUrl: 'https://picsum.photos/id/1025/400/400'
    }
  ]);
  
  // 计算属性：选中的商品
  const selectedItems = computed(() => {
    return cartItems.value.filter(item => item.selected);
  });
  
  // 计算属性：是否有选中的商品
  const hasSelectedItems = computed(() => {
    return selectedItems.value.length > 0;
  });
  
  // 计算属性：选中商品的总数量
  const selectedQuantity = computed(() => {
    return selectedItems.value.reduce((total, item) => total + item.quantity, 0);
  });
  
  // 计算属性：选中商品的总价（原价）
  const totalOriginalPrice = computed(() => {
    return selectedItems.value.reduce((total, item) => {
      const originalPrice = item.originalPrice || item.price;
      return total + originalPrice * item.quantity;
    }, 0);
  });
  
  // 计算属性：选中商品的总价（折扣价）
  const totalPrice = computed(() => {
    return selectedItems.value.reduce((total, item) => total + item.price * item.quantity, 0);
  });
  
  // 计算属性：总优惠金额
  const totalDiscount = computed(() => {
    return totalOriginalPrice.value - totalPrice.value;
  });
  
  // 计算属性：应付金额
  const payableAmount = computed(() => {
    return totalPrice.value; // 实际项目中可能需要加上运费等
  });
  
  // 监听选中状态，更新全选框
  watch(
    () => cartItems.value,
    (newVal) => {
      if (newVal.length === 0) {
        selectAll.value = false;
        return;
      }
      selectAll.value = newVal.every(item => item.selected);
    },
    { deep: true }
  );
  
  // 方法：获取品牌名称
  const getBrandName = (brandId) => {
    const brand = brands.value.find(b => b.id === brandId);
    return brand ? brand.name : '';
  };
  
  // 方法：获取分类名称
  const getCategoryName = (categoryId) => {
    const category = categories.value.find(c => c.id === categoryId);
    return category ? category.name : '';
  };
  
  // 方法：全选/取消全选
  const handleSelectAll = (checked) => {
    cartItems.value.forEach(item => {
      item.selected = checked;
    });
  };
  
  // 方法：单个商品选中状态变化
  const handleItemSelect = () => {
    selectAll.value = cartItems.value.every(item => item.selected);
  };
  
  // 方法：数量变化
  const handleQuantityChange = (item) => {
    // 确保数量在有效范围内
    if (item.quantity < 1) {
      item.quantity = 1;
    }
    if (item.quantity > item.stock) {
      item.quantity = item.stock;
    }
    console.log(`商品 ${item.id} 数量变为 ${item.quantity}`);
  };
  
  // 方法：删除单个商品
  const handleDeleteItem = (id) => {
    cartItems.value = cartItems.value.filter(item => item.id !== id);
    ElMessage.success('商品已从购物车中移除');
  };
  
  // 方法：批量删除选中商品
  const handleBatchDelete = () => {
    cartItems.value = cartItems.value.filter(item => !item.selected);
    ElMessage.success(`已删除 ${selectedItems.value.length} 件商品`);
  };
  
  // 方法：结算
  const handleCheckout = () => {
    console.log('前往结算', selectedItems.value);
    // 实际项目中这里会跳转到结算页面
    // $router.push('/checkout');
    ElMessage.success('即将前往结算页面');
  };
  
  // 方法：添加推荐商品到购物车
  const addRecommendedToCart = (product) => {
    // 检查商品是否已在购物车中
    const existingItem = cartItems.value.find(item => item.id === product.id);
    
    if (existingItem) {
      // 如果已存在，增加数量
      existingItem.quantity += 1;
      ElMessage.success(`已将 ${product.name} 数量增加到 ${existingItem.quantity}`);
    } else {
      // 如果不存在，添加到购物车
      // 这里需要补充商品的完整信息，实际项目中应该从API获取
      const fullProductInfo = {
        ...product,
        brandId: 1, // 假设默认品牌为耐克
        categoryId: 3, // 假设默认分类为板鞋
        quantity: 1,
        size: '42', // 默认尺码
        stock: 100,
        selected: true
      };
      cartItems.value.push(fullProductInfo);
      ElMessage.success(`${product.name} 已添加到购物车`);
    }
  };
  
  // 方法：搜索
  const handleSearch = () => {
    console.log('搜索:', searchQuery.value);
    // 实现搜索逻辑
  };
  
  // 方法：菜单选择
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  };
  </script>
  
  <style scoped>
  /* 基础样式复用主页面 */
  .shoe-store {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
  }
  
  /* 导航栏样式完全复用主页面 */
  .el-menu-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .logo {
    font-size: 26px;
    font-weight: 700;
    margin-right: 40px;
    background: linear-gradient(45deg, #ff4d4f, #ff7875);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .el-menu-item {
    position: relative;
    transition: color 0.3s;
  }
  .el-menu-item:hover {
    color: #ff4d4f !important;
  }
  .el-menu-item::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: #ff4d4f;
    transition: transform 0.3s ease;
  }
  .el-menu-item:hover::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  .user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .icon {
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.3s, color 0.3s;
  }
  .icon:hover {
    color: #ff4d4f;
    transform: scale(1.2);
  }
  
  /* 搜索框样式复用主页面 */
  .search-container {
    padding: 15px 50px;
    background-color: #1a1a1a;
  }
  .search-input {
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* 页面标题区样式 */
  .cart-header {
    background-color: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
  }
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .page-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
  }
  .page-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #ff4d4f;
    margin: 15px auto 0;
  }
  .page-desc {
    font-size: 16px;
    color: #666;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* 购物车主体样式 */
  .cart-section {
    padding: 40px 0;
  }
  
  /* 空购物车样式 */
  .empty-cart {
    background-color: #fff;
    border-radius: 8px;
    padding: 60px 0;
    text-align: center;
  }
  
  /* 购物车内容样式 */
  .cart-content {
    display: flex;
    gap: 30px;
  }
  
  /* 购物车列表样式 */
  .cart-list {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  }
  
  /* 列表标题样式 */
  .cart-list-header {
    display: flex;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    font-weight: 500;
    color: #666;
    font-size: 14px;
  }
  
  /* 列表列样式 */
  .cart-col {
    display: flex;
    align-items: center;
  }
  .select-col {
    width: 80px;
  }
  .product-col {
    flex: 1;
  }
  .price-col {
    width: 140px;
    justify-content: center;
  }
  .quantity-col {
    width: 160px;
    justify-content: center;
  }
  .subtotal-col {
    width: 160px;
    justify-content: center;
  }
  .action-col {
    width: 100px;
    justify-content: center;
  }
  
  /* 购物车商品项样式 */
  .cart-items {
    border-bottom: 1px solid #eee;
  }
  .cart-item {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s;
  }
  .cart-item:hover {
    background-color: #fafafa;
  }
  
  /* 商品信息样式 */
  .product-info {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .product-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
    transition: transform 0.3s;
  }
  .cart-item:hover .product-img {
    transform: scale(1.05);
  }
  .product-details {
    flex: 1;
  }
  .product-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    max-width: 400px;
  }
  .product-spec {
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
  }
  
  /* 价格样式 */
  .price {
    font-size: 16px;
    color: #ff4d4f;
    font-weight: 500;
  }
  .original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
  }
  
  /* 数量样式 */
  .stock-status {
    display: block;
    font-size: 12px;
    color: #f56c6c;
    margin-top: 5px;
    text-align: center;
  }
  
  /* 小计样式 */
  .subtotal {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  .subtotal.discounted {
    color: #ff4d4f;
  }
  .save-amount {
    display: block;
    font-size: 12px;
    color: #67c23a;
    margin-top: 5px;
    text-align: center;
  }
  
  /* 操作按钮样式 */
  .delete-btn {
    color: #666;
    transition: color 0.2s;
  }
  .delete-btn:hover {
    color: #ff4d4f !important;
  }
  
  /* 购物车操作按钮 */
  .cart-operations {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
  }
  .batch-delete-btn {
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .batch-delete-btn:hover {
    color: #ff4d4f !important;
  }
  .continue-shopping-btn {
    color: #666;
  }
  .continue-shopping-btn:hover {
    color: #ff4d4f !important;
  }
  
  /* 结算区域样式 */
  .cart-summary {
    width: 340px;
  }
  .summary-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    position: sticky;
    top: 100px;
  }
  .summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
  }
  .summary-item.label {
    color: #666;
  }
  .summary-item.value {
    color: #333;
  }
  .total-price {
    color: #ff4d4f;
    font-weight: 500;
  }
  .discount {
    color: #67c23a;
  }
  .summary-item.final {
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-bottom: 20px;
  }
  .payable {
    font-size: 20px;
    color: #ff4d4f;
    font-weight: 700;
  }
  .checkout-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    background: linear-gradient(45deg, #ff4d4f, #ff7875);
    border: none;
    transition: all 0.3s;
  }
  .checkout-btn:hover {
    background: linear-gradient(45deg, #f53f3f, #ff5757);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,77,79,0.3);
  }
  .checkout-btn:disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .tax-info {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 10px;
  }
  
  /* 推荐商品区样式 */
  .recommendation-section {
    padding: 40px 0;
    background-color: #fff;
  }
  .section-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
  }
  .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #ff4d4f;
    margin-top: 10px;
  }
  .recommendation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .recommendation-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s;
  }
  .recommendation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }
  .recommendation-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
  }
  .recommendation-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .recommendation-price {
    font-size: 16px;
    color: #ff4d4f;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .add-to-cart-btn {
    width: 100%;
    background-color: #fff;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
    transition: all 0.2s;
  }
  .add-to-cart-btn:hover {
    background-color: #ff4d4f;
    color: #fff;
  }
  
  /* 页脚样式完全复用主页面 */
  .footer {
    background: linear-gradient(to right, #1a1a1a, #141414);
    color: white;
    padding: 50px;
  }
  .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
  }
  .footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
  }
  .footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #ff4d4f;
  }
  .footer-column ul {
    list-style: none;
    padding: 0;
  }
  .footer-column ul li {
    margin-bottom: 10px;
  }
  .footer-column a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;
  }
  .footer-column a:hover {
    color: #ff4d4f;
    text-decoration: underline;
  }
  .social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }
  .social-icon {
    font-size: 24px;
    color: #999;
    transition: color 0.3s, transform 0.3s;
    cursor: pointer;
  }
  .social-icon:hover {
    color: #ff4d4f;
    transform: scale(1.2);
  }
  .app-download {
    color: #999;
    font-size: 14px;
  }
  .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #999;
    font-size: 14px;
  }
  
  /* 响应式调整 */
  @media (max-width: 1200px) {
    .cart-content {
      flex-direction: column;
    }
    .cart-summary {
      width: 100%;
    }
    .summary-box {
      position: static;
    }
    .recommendation-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (max-width: 992px) {
    .footer-content {
      grid-template-columns: repeat(2, 1fr);
    }
    .recommendation-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .action-col {
      width: 80px;
    }
    .subtotal-col {
      width: 120px;
    }
  }
  
  @media (max-width: 768px) {
    .el-menu-demo {
      padding: 0 20px;
    }
    .cart-list-header {
      display: none;
    }
    .cart-item {
      flex-direction: column;
      align-items: flex-start;
      padding: 15px;
    }
    .cart-col {
      width: 100%;
      margin-bottom: 10px;
      justify-content: flex-start;
    }
    .cart-col.select-col {
      margin-bottom: 15px;
    }
    .cart-col.price-col,
    .cart-col.quantity-col,
    .cart-col.subtotal-col,
    .cart-col.action-col {
      display: inline-block;
      width: auto;
      margin-right: 20px;
      margin-bottom: 0;
    }
    .product-name {
      max-width: 100%;
    }
    .quantity-actions {
      display: inline-flex;
    }
    .cart-operations {
      flex-direction: column;
      gap: 10px;
    }
    .batch-delete-btn, .continue-shopping-btn {
      width: 100%;
      justify-content: center;
    }
  }
  
  @media (max-width: 576px) {
    .footer-content {
      grid-template-columns: 1fr;
    }
    .recommendation-grid {
      grid-template-columns: 1fr;
    }
    .page-title {
      font-size: 28px;
    }
    .product-img {
      width: 80px;
      height: 80px;
    }
    .cart-col.price-col,
    .cart-col.quantity-col,
    .cart-col.subtotal-col,
    .cart-col.action-col {
      display: block;
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px;
    }
  }
  </style>
  